@import "mixin_helpers";

#gritter-notice-wrapper {
  position:fixed;
  top:20px;
  right:20px;
  width:301px;
  z-index:9999;

  &.top-left {
    left: 20px;
    right: auto;
  }

  &.bottom-right {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
  }

  &.bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
  }
}

.gritter-item-wrapper {
  position:relative;
  margin:0 0 10px 0;
  background:image-url("ie-spacer.gif"); /* ie7/8 fix */

  &.warn {
    .gritter-title {
      color: orange;
    }
  }

  &.error {
    .gritter-title {
      color: lighten(red,15);
    }
  }


  &.success {
    .gritter-title {
      color: lighten(green,15);
    }
  }
}

.gritter-item {
  display:block;
  background: rgba(0,0,0,.7);
  color:#eee;
  padding:10px;
  font-size: 11px;
  font-family: 'Open Sans';

  @include box-shadow(0 2px 2px rgba(0,0,0,.4));
  @include border-radius(6px);
}
.hover .gritter-item {
  background-position:right -40px;
}
.gritter-item p {
  padding:0;
  margin:0;
  word-wrap:break-word;
}
.gritter-close {
  display:none;
  position:absolute;
  top:0px;
  right:0px;
  cursor:pointer;
  width:100%;
  height:100%;
}
.gritter-title {
  font-size:14px;
  font-weight:600;
  padding:0 0 7px 0;
  display:block;
  text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
}
.gritter-image {
  width:48px;
  height:48px;
  float:left;
}
.gritter-with-image,
.gritter-without-image {
  padding:0;
}
.gritter-with-image {
  width:220px;
  float:right;
}
